<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        图片整合（ 精灵图 雪碧图）
            把多张背景图整合到一张,利用 background-position 可以找到对应的图片坐标

            优点：
                减少向服务器的请求次数，从而提高页面的加载速度
                减少图片的总体积
            缺点：
                不灵活
     -->
     <style>
         *{padding:0; margin:0;}
         ul{
             width:500px; height:500px;
             background: #000;
         }
         ul li{
             width:46px; height:46px;
             background-image: url(images/icon.png);
             background-position: -11px -8px;
         }
         .li2{
            background-position: -209px -8px;  
         }
         .li3{
             background-position: -276px -8px;
         }
     </style>
</head>
<body>
    <ul>
        <li></li>
        <li class="li2"></li>
        <li class="li3"></li>
        <li></li>
    </ul>
</body>
</html>